import 'package:flutter/material.dart';
// import 'package:json_model/graph_inspector.dart';

class Login extends StatefulWidget {
  const Login({Key? key}) : super(key: key);

  @override
  State<Login> createState() => _LoginState();
}

class _LoginState extends State<Login> {
  // 定义全局的key
  final GlobalKey _key = GlobalKey<FormState>();
  // 设置controller
  final TextEditingController _account = TextEditingController();
  final TextEditingController _password = TextEditingController();

  final FocusNode _u = FocusNode();
  final FocusNode _p = FocusNode();

  // 对点操作需要声明一个全局的对象
  final FocusScopeNode _focusScopeNode = FocusScopeNode();

  // 页面退出的时候 生命周期
  @override
  void dispose() {
    // 注销
    super.dispose();
    _account.dispose();
    _password.dispose();
    _u.dispose();
    _p.dispose();
    // ignore: unnecessary_null_comparison
    if (_focusScopeNode != null) _focusScopeNode.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("登录"),
        backgroundColor: Colors.pink[200],
        // 阴影
        elevation: 2.0,
        // 文字居中
        centerTitle: true,
      ),
      body: Form(
        key: _key,
        child: Column(
          children: [
            const SizedBox(height: 5),
            Container(
              width: 70,
              height: 70,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                image: const DecorationImage(
                  image: NetworkImage("https://img2.baidu.com/it/u=3964894508,3673265648&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400"),
                  fit: BoxFit.cover
                )
              ),
            ),
            // 账号输入框
            TextFormField(
              // 自动获取焦点
              autofocus: true,
              focusNode: _u,
              controller: _account,
              // 装饰器
              decoration: const InputDecoration(
                // 前置图标
                prefixIcon: Icon(Icons.person),
                labelText: "账号",
                hintText: "请输入账号",
              ),
              // 校验
              validator: (v) {
                if (v == null || v.isEmpty) {
                  return "账号不能为空";
                } else {
                  return null;
                }
              },
              // 回车则下一个输入框
              textInputAction: TextInputAction.next,
              // 值改变事件
              onChanged: (v) {
                // debugPrint("输出的内容："+v);
              },
              // 回车事件
              onFieldSubmitted: (v) {
                debugPrint('回车输出内容：' + v);
              },
            ),
            // 输入框(密码框)
            TextFormField(
              focusNode: _p,
              controller: _password,
              // 装饰器
              decoration: const InputDecoration(
                // 前置图标
                prefixIcon: Icon(Icons.lock),
                labelText: "密码",
                hintText: "请输入密码",
              ),
              // 开启密码框模式
              obscureText: true,
              // 回车是发送行为
              textInputAction: TextInputAction.send,
              // 检验密码
              validator: (v) {
                if (v == null || v.length < 5) {
                  return "请输入五位以上密码";
                } else {
                  return null;
                }
              },
              onChanged: (v) {
                // debugPrint("输出的内容："+v);
              },
            ),
            const SizedBox(
              height: 10,
            ),
            // 登录按钮
            Padding(
              padding: const EdgeInsets.only(top: 10),
              child: Row(
                children: <Widget>[
                Expanded(
                  child: ElevatedButton(
                     child: const Padding(
                       padding:  EdgeInsets.all(10),
                       child: Text("登录"),
                     ),
                  onPressed: () {
                    // 默认提交失去所有焦点，该方法设置后失去所有焦点
                    _focusScopeNode.unfocus();
                    debugPrint("-----账号:" + _account.text + "------密码:" + _password.text);
              // 点击提交的时候触发表单校验
                    if ((_key.currentState as FormState).validate()) {
                      debugPrint("校验通过");
                       } else {
                         debugPrint("校验失败");
                         }
                      },
                 )
                ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
